{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国的温差</title>
    <!-- 导入几个js -->
    <script src="{% static 'js/jquery-3.2.1.js' %}"></script>
    <script src="{% static 'js/echarts.min.js' %}"></script>
    <script src="{% static 'js/china.js' %}"></script>
</head>
<body>
<!--定义一个容器防止地图-->
<div id="china_diff" style="width:1200px;height: 800px;margin: 50px auto;"></div>
</body>
</html>
<script>
    //处理数据
    //接收传递过来的书
    var rev_data ={{ result |safe}}
    //定义一个集合
    var diff_temp_array = [];
    //遍历接收的数据
    for(var i=0;i<rev_data.length;i++){
        //添加
        diff_temp_array[i] = {name: rev_data[i].city,  value: rev_data[i].diff};
    }


    //实例化一个echarts对象
    var echart_china = echarts.init(document.getElementById("china_diff"));
    // 准备地图的配置文件
    var optionMap_china = {
        backgroundColor: '#FFF',
        title: {
            text: '全国温差',
            subtext: '2020-5-11',
            x: 'center'
        },
        tooltip: {
            trigger: 'item'
        },

        //左侧小导航图标
        visualMap: {
            min: 5,
            max: 18,
            x: 'left',
            y: 'center',
            text: ['最高', '最低'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
            }
        },

        //配置属性
        series: [{
            name: '数据',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                normal: {
                    show: true  //省份名称
                },
                emphasis: {
                    show: true
                }
            },
            data: diff_temp_array //数据
        }]
    };
    //为实例化的对象加载配置文件
    echart_china.setOption(optionMap_china)
</script>